<!-- 上传长期保视频弹框 -->
<template>
  <div>
    <el-dialog v-model="showDialog" title="添加视频" width="600">
      <el-upload ref="uploadEle" class="upload-demo" :auto-upload="true" accept=".mp4" drag
        :http-request="onUploadAction" :before-upload="onBeforeUpload" :on-exceed="onHandleExceed"
        :action="baseurl + 'rest/period-insur/serve-company/upload'" :limit="1" :multiple="false">
        <img src="../../../assets/image/uploadvideo.png" alt="" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div class="flexendbox">
        <el-button class="my_cancelbtn" @click="onCancel">取消</el-button>
        <el-button class="my_btn" @click="onConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { cloneDeep } from 'lodash'
import {
  ElMessage,
  ElMessageBox,
  ElTable,
  UploadFile,
  UploadFiles,
  UploadRawFile
} from 'element-plus'
import { longuploadvideoapi, longaddvideoapi } from '@/api/api.ts'
import baseurl from '@/api/env'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  itemDetail: {
    type: Object,
    default() {
      return {}
    }
  }
})

const emits = defineEmits(['update:show', 'success'])

const uploadEle = ref(null)

const showDialog = ref(false)

const state = reactive({
  bannerUrl: '',
  fileList: [],
  fileName: '',
})

const addfilename = ref('')
const onUploadAction = (option: any) => {
  console.log(1111, option)
  const param = new FormData()
  param.append('file', option.file)
  console.log(7890, param)
  longuploadvideoapi(param).then((res: any) => {
    console.log(res, '上传视频')
    ElMessage.success('视频上传成功！')
    addfilename.value = res.fileUrl
  })
}

const onBeforeUpload = async (file: UploadRawFile) => {
  const type = ['video/mp4']
  if (type.indexOf(file.type) === -1) {
    ElMessage.error('上传的文件必须是视频')
    return false
  }
  // 超过50M开始压缩
  if (file.size > 50 * 1024 * 1024) {
    ElMessage.error('请上传小于50M的视频')
    return false
  }
  return true
}
const onHandleExceed = (files: File[], fileList: UploadFile[]) => {
  if (state.fileList.length >= 1) {
    ElMessage.error('只能上传一个视频')
    return
  }
}

const onConfirm = () => {
  console.log(props.itemDetail)
  const query = cloneDeep(props.itemDetail)
  query.params.videos = addfilename.value

  longaddvideoapi(query).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success('操作成功')
      emits('success')
      onCancel()
      //   longaddvideocancel();
    }
  })
}

const onCancel = () => {
  showDialog.value = false
}

watch(() => props.show, (newval) => {
  showDialog.value = newval
})

watch(showDialog, (newval) => {
  emits('update:show', newval)
  if (!newval) {
    uploadEle.value.clearFiles()
  }
})
</script>
<style lang="scss" scoped></style>